<script setup>
import { ref } from 'vue';
import { userInfoRegisterAPI } from '@/apis/userAPI';
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
import { useRouter } from 'vue-router';

const form = ref({
    name:'',
    mobile: '',
    password: '',
    cardType: 0,
    cardNumber: '',
    email: '',
    address: ''
})

const rules = {
  name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ],
  password: [
    { required: true, message: '密码不能为空' },
    { min: 6, max: 14, message: '密码长度要求6-14个字符' }
  ],
  cardType: [ { required: true, message: '请选择证件类型', trigger: 'change' } ],
  cardNumber: [ { required: true, message: '请输入证件号码', trigger: 'blur' } ],
  email: [ { required: true, message: '请输入邮箱', trigger: 'blur' }, { type: 'email', message: '邮箱格式不正确', trigger: 'blur' } ],
  mobile: [ { required: true, message: '请输入手机号', trigger: 'blur' } ],
  address: [ { required: true, message: '请输入地址', trigger: 'blur' } ],
}

const router = useRouter();

const onSubmit = async () =>{
    const {name,mobile,password,cardType,cardNumber,email,address} = form.value;
    await userInfoRegisterAPI({name:name,mobile:mobile,password:password,cardType:cardType,cardNumber:cardNumber,email:email,address:address});
    ElMessage.success('注册成功，请登录！');
    setTimeout(() => {
        router.push('/Login');
    }, 1000);
}

</script>

<template>
  <div class="register-bg">
    <a class="back-home-link" href="/">返回首页</a>
    <div class="register-container">
  <h2 style="text-align: center; margin-bottom: 20px">用户注册</h2>
  <el-form  label-width="80px" :model="form" :rules="rules">
      <el-form-item label="用户名" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input  v-model="form.mobile"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input  v-model="form.password" type="password" show-password />
      </el-form-item>
      <el-form-item label="证件类型" prop="cardType">
        <el-select v-model="form.cardType" placeholder="请选择">
          <el-option label="身份证" :value="0" />
          <el-option label="军官证" :value="1" />
          <el-option label="护照" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="身份证号码" prop="cardNumber">
        <el-input  v-model="form.cardNumber"/>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input  v-model="form.email"/>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="form.address" />
      </el-form-item>
      <el-form-item>
        <el-button class="btn" type="primary" @click="onSubmit">注册</el-button>
      </el-form-item>
    </el-form>
    </div>
  </div>
</template>

<style scoped lang="scss">
.register-bg {
  min-height: 100vh;
  background-color:rgb(249, 249, 248);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.back-home-link {
  position: absolute;
  top: 32px;
  right: 48px;
  color: #4a4949;
  font-size: 15px;
  text-decoration: underline;
  z-index: 10;
  transition: color 0.2s;
  &:hover {
    color: #5eb69c;
  }
}
.register-container {
  max-width: 700px;
  width: 700px;
  margin: 40px auto;
  background: #e0dfdf;
  padding: 30px 40px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  .btn {
    width: 100%;
    height: 40px;
  }
}
</style>
